import React, { Component } from 'react';
import { Link } from 'react-router-dom';
// import Axios from 'axios';
// require('./../mock')
import $ from 'jquery';

class Com extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dat: []
    }
  }
  componentDidMount() {
    let f_type = '月度最佳';
    let type = JSON.stringify(f_type)
    fetch(`https://sun.daxunxun.com/api/food/type?f_type=`+type)
    .then(res => res.json())
    .then(data => {
      console.log(data)
      this.setState({
        dat: data
      })
    })
  }
  goDetail (fid){
    this.props.history.push('/detail/' + fid)
  }
  recipes_Raight (){
    $('._Recipes_ul').css("left","-490px")
  }
  recipes_Left() {
    $('._Recipes_ul').css("left","0px")
  }
  render() {
    const dat = this.state.dat
    // console.log(list)
    let arr = [];
    for (var i in dat) {
      if (i<14) {
        // console.log(dat[i])
        let fid = dat[i].f_id  // 获取食物id
        arr.push(
          <li key={dat[i].f_id} onClick={ this.goDetail.bind(this, fid)}>
            <div className="bannerImg">
              <img src={dat[i].banner} alt="" />
            </div>
            <div className="Recipe_spand">
              <span>
                {dat[i].name}
              </span>
            </div>
          </li>
        )
      }
    }
    return (

      <div className="Home_recipes">
        <div className="Home_recipes_nav">
          <b>新秀菜谱</b>
          <Link to="" className="recipes_all">全部</Link>
          <div className="icon">
            <i onClick={this.recipes_Left.bind(this)} className="iconfont icon-icon_arrow_left"></i>
            <i onClick={this.recipes_Raight.bind(this)} className="iconfont icon-icon_arrow_right"></i>
          </div>
        </div>
        <div className="Home_recipes_photo">
          <ul className="_Recipes_ul">
            {
              arr
            }
          </ul>

        </div>
      </div>

    )
  }
}

export default Com;